<template>
  <div id="order-query-wrapper">
    <div class="content">
      <div class="table">
        <el-table :data="tableData" style="width: 90%; height: 80%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column prop="serialNumber" label="序号" width="120"/>
          <el-table-column prop="title" label="标题" width="220"/>
          <el-table-column prop="type" label="类型" width="120" />
          <el-table-column prop="isVisible" label="是否可见" width="120" />
          <el-table-column prop="submitTime" label="提交时间" width="120" />
          <el-table-column prop="status" label="状态" width="120" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>

const handleClick = () => {
  console.log('click')
}
// 序号 标题 类型 是否可见 提交时间 状态
const tableData = [
  {
    serialNumber: 1,
    title: '客户信息管理系统需求文档',
    type: '文档',
    isVisible: true,
    submitTime: '2023-10-08 09:30:22',
    status: '已审核'
  },
  {
    serialNumber: 2,
    title: '2023年第三季度销售报表',
    type: '报表',
    isVisible: true,
    submitTime: '2023-10-05 15:42:10',
    status: '已发布'
  },
  {
    serialNumber: 3,
    title: '新产品上线推广方案',
    type: '方案',
    isVisible: false,
    submitTime: '2023-10-01 11:15:36',
    status: '审核中'
  },
  {
    serialNumber: 4,
    title: '用户反馈问题汇总',
    type: '清单',
    isVisible: true,
    submitTime: '2023-09-28 16:08:55',
    status: '待处理'
  },
  {
    serialNumber: 5,
    title: '系统升级维护计划',
    type: '计划',
    isVisible: false,
    submitTime: '2023-09-25 10:20:18',
    status: '已驳回'
  }
];

const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
#order-query-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content{
    display: flex;
    flex-direction: column;
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;
    .table{
      display: flex;
      flex: 1;
      justify-content: center; /* 水平方向居中 */
      align-items: center; 
      width: 100%;
      height: 400px;
      background-color: lightblue;
      border-radius: 30px;
    }
  }
}


</style>